<template>
  <div>
    <div id="pie3"></div>
  </div>
</template>

  <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const response = await this.$http.get("metrics/SourcePercentage")
      if (response.status == 200) {
        const data = response.data;
        const weibo = data.weibo_percentage.toFixed(2)
        const tieba = data.tieba_percentage.toFixed(2)
        const zhihu = data.zhihu_percentage.toFixed(2)
        this.pieData = [
            {name:"微博",value:weibo},
            {name:"贴吧",value:tieba},
            {name:"知乎",value:zhihu}
            ]
        this.updateChartData()
      }
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("pie3"));

      var scaleData = [
        {
          name: "知乎",
          value: 0
        },
        {
          name: "微博",
          value: 0
        },
        {
          name: "贴吧",
          value: 0
        },

      ];
      var rich = {
        white: {
          color: "#ddd",
          align: "center",
          padding: [3, 0]
        }
      };
      var placeHolderStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0
        }
      };
      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000"
      ];
      for (var i = 0; i < scaleData.length; i++) {
        data.push(
          {
            value: scaleData[i].value,
            name: scaleData[i].name,
            itemStyle: {
              normal: {
                borderWidth: 4,
                shadowBlur: 200,
                borderColor: color[i],
                shadowColor: color[i]
              }
            }
          },
          {
            value: 2,
            name: "",
            itemStyle: placeHolderStyle
          }
        );
      }
      var seriesObj = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [30, 80],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function(params) {
                  if (params.name !== "") {
                    return params.name + "\n{white|" + "占比" + params.value + "%}";
                  } else {
                    return "";
                  }
                },
                rich: rich
              },
              labelLine: {
                length:10,
                length2: 20,
                show: true,
                color: "#00ffff"
              }
            }
          },
          data: data
        }
      ];

      this.chart.setOption({
        title: {
          text: "来源占比",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20
          },
          top: "-1%",
          left: "40%"
        },
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: seriesObj
      });
    },
    updateChartData(){
      this.chart.setOption({
        series : [{data : this.pieData}]
      })
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

  <style lang="scss" scoped>
#pie3 {
  width: 100%;
  height: 40vh;
}
</style>